<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="'《'+${session.mvName}+'》'">正在观看~</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/vue.js"></script>
    <script src="js/all-of-you.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/gsap.min.js"></script>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        .before {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 100%;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            z-index: 999;
        }

        .row {
            z-index: -1;
        }


    </style>
</head>
<body>
<div style="position: relative">
    <div id="app" class="before"></div>
    <div style="position: absolute;top: 0;bottom: 0;left:0;right: 0;width:100%;height:100%;z-index: 0;">
        <nav class="navbar navbar-default">

            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#defaultNavbar1">
                        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span></button>
                    <a class="navbar-brand" href="#">MVtogether</a></div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="defaultNavbar1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">链接1<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">链接2</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                                aria-expanded="false">下拉菜单<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">活动</a></li>
                                <li><a href="#">活动2</a></li>
                                <li><a href="#">其它</a></li>
                                <li class="divider"></li>
                                <li><a href="#">分割链接</a></li>
                                <li class="divider"></li>
                                <li><a href="#">另一个分割链接</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">预订</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                                aria-expanded="false">Menu<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">我要预订</a></li>
                                <li><a href="#">我有约了</a></li>
                                <li><a href="#">联系作者</a></li>
                                <li class="divider"></li>
                                <li><a href="#">不看了</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <h1 class="text-center" th:text="'《'+${session.mvName}+'》'" style="color: white">RoomN</h1>
                </div>
            </div>
        </div>
        <div class="container">

            <div class="row">

                <div class="text-center col-md-12">
                    <div class="well">

                        <div id="dplayer"></div>
                        <button value="同步" onclick="dp_sync()">同步</button>
                        >
                    </div>

                </div>


            </div>
        </div>
        <div class="row" onload="dp_initSync()">
            <div class="text-center col-md-6 col-md-offset-3">
                <h4>声明</h4>
                <p>Copyright &copy; 2021 &middot;LR All Rights Reserved &middot; <span
                        class="glyphicon glyphicon-home"
                        aria-hidden="true"> </span>&nbsp&nbsp<a
                        href="http://yourwebsite.com/">MVtogether</a></p>
                <p>如有侵权，请联系&nbsp&nbsp<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> &nbsp
                    qqmail：1617118335@qq.com 及时删除</p>
                <p>本站所有资源仅供学习使用，本站不承担任何法律责任</p>
            </div>
        </div>
        <hr>
    </div>

</div>
</body>
<script>
    if (!window['CodePenVueComponent']) {
        throw new Error('Error compiling Vue component.');
    }
    new Vue(CodePenVueComponent).$mount('#app');
</script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js\DPlayer.min.js"></script>

<script th:inline="javascript">
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        autoplay: true,
        video: {
            // url: 'D:\\FFOutput/aboutTime.mp4',
            url: [[${session.mvUrl}]],

        },
    });
    dp_initSync();
</script>
</html>
